<template>
    <div class="thing-model-wrapper">
        <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane v-for="item in tabList" :key="item.label" :label="item.label" :name="item.label">
                <component :is="item.value" v-if="item.label === activeName" :detailData="detailData" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import Attribute from './components/Attribute.vue';
import Event from './components/Event.vue';
import Action from './components/Action.vue';
import Module from './components/module/Index.vue';
import type { SysMetadataObject } from '@great/services';

const props = defineProps<{
    detailData?: SysMetadataObject;
}>();

const tabList = ref([
    {
        label: '属性',
        value: markRaw(Attribute)
    },
    {
        label: '事件',
        value: markRaw(Event)
    },
    {
        label: '行为',
        value: markRaw(Action)
    },
    {
        label: '组件',
        value: markRaw(Module)
    }
]);
const activeName = ref(tabList.value[0].label);
</script>
<style scoped lang="scss"></style>
